<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Cabinet CW01 demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="format-detection" content="telephone=no">
    <!--<script type="text/javascript" src="js/adaptive.js"></script>-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../element-ui/index.ml.css">
    <script type="text/javascript" src="../js_code/jquery-3.6.1.min.js?v=2"></script>
    <script type="text/javascript" src="../element-ui/vue.js"></script>
    <!-- import JavaScript -->
    <script type="text/javascript" src="../element-ui/index.en.js"></script>

    <script src="../js_code/underscore-min.js"></script>
    <script src="../js_code/jquery-3.6.1.min.js"></script>
    <script src="../js_code/iotauth.js"></script>
    <script src="../js_code/v5_cw01_demo.js?v=2"></script>
    <script>
        function refresh2() {
            window.location.reload();
        }
    </script>
    <style>
        .box-card {

            display: inline-block;
        }
    </style>
</head>
<body class="big_show">

<div style="display: block">
    <input id="base_url" value="https://api.bestwond.com" style="width: 200px;border-radius: 5px;">
    App Id<input id="app_id" value="" style="width: 200px;border-radius: 5px;">
    App Secret<input id="app_secret" value="" style="width: 200px;border-radius: 5px;">

    <button onclick="kd.get_device_list()">Get Device List</button>
</div>
<div id="app" class="screen_app">
    <!-- todo Step4 get can save boxes -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 380px;margin-top: 20px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number"  style="width:320px;">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="step4_get_can_save_boxes()" type="success" style="font-weight: bolder">
                        Get Box List
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-row>
                        <el-button v-for="box in can_save_box_list" @click="open_box(box.lock_address)"
                                style="width:50px;height:50px;border:1px solid silver;text-align: center;padding: 0">

                            {{box.box_name}}
                            <el-row>
                                {{box.lock_address}}
                            </el-row>
                            <el-row>
                                {{box.box_size}}
                            </el-row>
                        </el-button>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row style="display: none">
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step4 API Result</span>
            </div>
            {{step4_data}}
        </el-card>
    </el-row>
</div>
</div>
</body>

<script>

    bw = new Vue({
        el: '#app',
        data: {
            form: {},
            device_number: "",
            user_id: "user10001",
            start_end_time: "",
            loading: false,
            order_id: "",
            code: "1001",
            status: "",
            box_id: "",
            start_date: "",
            order_status: [
                {value: 'CONFIRMED', label: 'CONFIRMED'},
                {value: 'ONGOING', label: 'ONGOING'},
                {value: 'CHECK_IN', label: 'CHECK_IN'},
                {value: 'IN_PROGRESS', label: 'IN_PROGRESS'},
                {value: 'CHECK_OUT', label: 'CHECK_OUT'},
            ],
            end_date: "",
            select_num: "number",
            api_data: "",
            action_date: "",
            can_save_box_list: [],
            step1_data: "",
            step2_data: "",
            step3_data: "",
            step4_data: "",
            step5_data: "",
            step6_data: "",
            step7_data: "",
            step8_data: "",
            step9_data: "",
            step10_data: "",
            box_size: "S",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        },
        created: function () {

        },
        methods: {
            open_box: function (lock_address) {
                console.log("------------lock_address=", lock_address);
                var url = "/api/iot/open/box/";
                var data = {
                    "device_number": this.device_number,
                    "lock_address": lock_address,
                    "use_type": "S"
                };
                var a = kd.bw_api(url, data);
                $("#api_return").html(JSON.stringify(a));
            },
            step1_set_save_order: function () {
                this.step1_data = kd.step1_set_save_order(this.device_number, this.user_id, this.code, this.start_end_time[0], this.start_end_time[1]);
            },
            step2_update_order: function () {
                this.step2_data = kd.step2_update_order(this.device_number, this.order_id, this.code, this.status, this.start_end_time[0], this.start_end_time[1]);
                this.step3_get_order();
            },
            step3_get_order: function () {
                this.step3_data = kd.step3_get_order(this.device_number, this.user_id, this.code);
                var order_info = this.step3_data.data;
                this.order_id = order_info.order_id;
                this.status = order_info.status;
                this.start_date = order_info.start_date;
                this.end_date = order_info.end_date;
                this.start_end_time = [this.start_date, this.end_date];
                console.log("order_id ====", this.order_id)
            },

            step4_get_can_save_boxes: function () {
                this.step4_data = kd.step4_get_device_boxes(this.device_number);
                this.can_save_box_list = _.sortBy(this.step4_data.data, "box_name");
            },
            step4_get_device_boxes: function (dn) {
                this.step4_data = kd.step4_get_device_boxes(dn);
                this.device_number = dn;
                this.can_save_box_list = _.sortBy(this.step4_data.data, "box_name");
            },
            set_box_id: function (box) {
                this.box_id = box.box_id;
            },
            step5_order_check_in: function () {
                this.step5_data = kd.step5_order_check_in(this.device_number, this.order_id,  this.box_id, this.action_date);
                this.step3_get_order();
            },
            step6_order_in_progress: function () {
                this.step6_data = kd.step6_order_in_progress(this.device_number, this.order_id,   this.action_date);
                this.step3_get_order();
            },
            step7_order_check_out: function () {
                this.step7_data = kd.step7_order_check_out(this.device_number, this.order_id,  this.action_date);
                this.step3_get_order();
            },
        }
    });
</script>
</html>
